<template>
   <div class="theme">
       <van-nav-bar
            title="乐购商城"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="theme-heads" v-if="theme.head_img != undefined">
            <img :src="theme.head_img.url" alt="">
        </div>
        <list-product :products="this.theme.products"></list-product>
   </div>
</template>

<script>
import ListProduct from './../components/product-list.vue';
export default {
    name:'theme',
    components:{
        ListProduct
    },
    data(){
        return {
            theme:{}
        }
    },
    mounted(){
       this.gettheme();
    },
    methods:{
        gettheme(){
            let id = this.$route.params.id;
            this.axios.get('api/v1/theme/'+ id).then((res)=>{
                this.theme = res.data
            }).catch((res)=>{
                return res;
            })
        },
        onClickLeft(){
            this.$router.push({path:'/'});
        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
    .theme{
        .theme-heads{
            height: 200px;
            margin-bottom: 10px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>